<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <title></title>
  <link rel="stylesheet" href="CSS/common/reset.css">
  <link rel="stylesheet" href="CSS/order.css">
</head>

<body>
  <div id="wrap">
    <div id="subBar">
      <a href="#">
        <img src="images/logo.png" class="logo" alt="">
      </a>
      <div class="message">
        <p>欢迎您:kaivon</p>
        <p>空闲桌位:5桌</p>
        <p>正在点餐:1桌</p>
        <p>正在用餐:5桌</p>
        <p>未选桌子</p>
      </div>
      <ul class="action">
        <li class="ac"><i>0</i><span class="iconfont">&#xe65e;</span>已点</li>
        <li><span class="iconfont">&#xe62e;</span>座位</li>
        <li><span class="iconfont">&#xe625;</span>后台</li>
        <li><span class="iconfont">&#xe892;</span>退出</li>
      </ul>
    </div>
    <div id="navBar">
      <ul class="navWrap">
        <li class="active">
          <span class="iconfont">&#xe70e;</span>
          <span class="text">已点</span>
        </li>
        <li>
          <span class="iconfont">&#xe648;</span>
          <span class="text">已下单</span>
        </li>
      </ul>
      <div class="search">
        <input type="text">
        <button>
          <span class="iconfont">&#xe617;</span>
        </button>
      </div>
    </div>
    <div id="content">
      <!-- 已点结构 -->
      <ul class="orderBox">
        <li>
          <table>
            <tbody>
              <tr>
                <td>1</td>
                <td><img src="images/img_01.jpg" alt=""></td>
                <td>菜合</td>
                <td>
                  <button><span class="iconfont">&#xe870;</span></button>
                  <span class="num">1</span>
                  <button><span class="iconfont">&#xe602;</span></button>
                </td>
                <td>￥10 x 1</td>
                <td>多点辣</td>
                <td>
                  <button class="select">
                    <span class="iconfont">&#xe61e;</span>
                  </button>
                </td>
              </tr>
              <tr>
                <td>1</td>
                <td><img src="images/img_01.jpg" alt=""></td>
                <td>菜合</td>
                <td>
                  <button><span class="iconfont">&#xe870;</span></button>
                  <span class="num">1</span>
                  <button><span class="iconfont">&#xe602;</span></button>
                </td>
                <td>￥10 x 1</td>
                <td>多点辣</td>
                <td>
                  <button class="select">
                    <span class="iconfont">&#xe61e;</span>
                  </button>
                </td>
              </tr>
            </tbody>
          </table>
          <div class="foot">
            <div>
              <span>桌号: <strong>10</strong>号桌</span>
              <span>人数: 1</span>
              <span>订单号: 1621244359985</span>
              <button class="addDishes">添菜</button>
            </div>
            <div>
              <span>总消费: ￥<strong>98</strong></span>
              <button class="pay">下单</button>
            </div>
          </div>
        </li>
      </ul>

      <!-- 已下单结构 -->
      <ul class="orderBox shopped">
        <li>
          <table>
            <thead>
              <tr>
                <th>序号</th>
                <th>菜品名称</th>
                <th>价格/数量</th>
                <th>状态</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td>1</td>
                <td>
                  <img src="images/img_01.jpg" alt="">
                  <span>菜合</span>
                </td>
                <td>￥10 x 1</td>
                <td>带上菜</td>
              </tr>
              <tr>
                <td>1</td>
                <td>
                  <img src="images/img_01.jpg" alt="">
                  <span>菜合</span>
                </td>
                <td>￥10 x 1</td>
                <td>带上菜</td>
              </tr>
            </tbody>
          </table>
          <div class="foot">
            <div>
              <span>桌号: <strong>10</strong>号桌</span>
              <span>人数: 1</span>
              <span>订单号: 1621244359985</span>
              <span>下单时间: 2025-10-1 10:00:00</span>
            </div>
            <div>
              <span>总消费: ￥<strong>98</strong></span>
            </div>
          </div>
        </li>
      </ul>
    </div>
  </div>
</body>

</html>